<template>
  <div class="multiplePiecesPage">
    <!-- 模板li -->
    <div class="left">
      <div class="auditTypeListBox">
        <ul class="auditTypeListUl">
          <li
            class="auditTypeListItem"
            :class="{ active: activeTemplateId == item.value }"
            v-for="item in auditCategoryDictCode"
            :key="item.value"
            @click="changeTemplate(item)"
          >
            <span class="roleName">{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 模板信息 -->
    <div class="right">
      <full-parent-dom-with-dask :loading="loadingDetail"></full-parent-dom-with-dask>
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        class="AsteriskAfter newEditStyle templateConfigForm"
      >
        <!-- 审核流程 -->
        <a-form-model-item :label="$t('auditProcess')" class="customFormModelItem">
          <audit-process-list
            ref="auditProcessRef"
            :processList="formData.items"
            :hasUser="false"
            :role-ids="initSelectedRoleIds"></audit-process-list>
        </a-form-model-item>
        <!-- 备注 -->
        <a-form-model-item :label="$t('remark')" class="customFormModelItem" prop="remark">
          <custom-text-area
            @change="formData.remark = $event"
            :val="formData.remark"
            :rows="3"
            :max-len="200"
          ></custom-text-area>
        </a-form-model-item>
      </a-form-model>
      <div class="btnButtonBox" style="text-align: center;">
        <auth-button :auth="managePerms.auditTemplate.edit" @click="save" :loading="saving">
          {{ $t('sure') }}
        </auth-button>
        <a-button style="margin-left: 24px" @click="resetFormData">{{ $t('cancel') }}</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import AuditProcessList from '@/views/components/AuditProcess/config.vue'
import auditTplApi from '@/api/modules/system/auditTemplate'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import AuthButton from '@/components/AuthButton'
import { managePerms } from '@/config/permission/index'
import { checkTextLen } from '@/utils/validate'
import CustomTextArea from '@/components/CustomTextArea/index.vue'
export default {
  name: 'AuditTemplate',
  components: { AuditProcessList, FullParentDomWithDask, AuthButton, CustomTextArea },
  computed: {
    ...mapState({
      // 模板类型
      auditCategoryDictCode: (state) => state.dict.auditCategoryDictCode
    })
  },
  data () {
    return {
      managePerms,
      // 当前审核类别value
      activeTemplateId: '',
      templateList: [],
      defaultFormData: {},
      formData: {
        remark: ''
      },
      rules: {
        remark: [{ validator: checkTextLen(200) }]
      },
      // 已配置的审核流程选择的角色ID
      initSelectedRoleIds: [],
      saving: false,
      loadingDetail: false
    }
  },
  watch: {
    activeTemplateId: {
      handler () {
        this.getTemplateDetail()
      },
      immediate: true
    }
  },
  created () {
    this.initData()
  },
  methods: {
    ...mapActions(['getAuditCategoryDictCodeData']),
    initData () {
      this.getAuditCategoryDictCodeData().then(() => {
        this.activeTemplateId = this.auditCategoryDictCode[0].value
      })
    },
    getTemplateDetail () {
      if (!this.activeTemplateId) {
        return
      }
      this.loadingDetail = true
      auditTplApi.getTemplateInfor({ category: this.activeTemplateId }).then(res => {
        const { data } = res
        if (!data) {
          // 未配置的时候
          this.formData.remark = ''
          this.formData.category = this.activeTemplateId
          this.defaultFormData.remark = ''
          this.formData.items = []
          return
        }
        // 已有配置的时候
        const roleIds = []
        this.formData.remark = data.remark
        this.formData.category = data.category
        this.formData.items = data.items.map(item => {
          roleIds.push(item.roleId)
          return {
            id: item.id,
            level: item.level,
            roleId: item.roleId,
            userIds: item.users ? item.users.map(item => {
              return item.userId
            }) : [],
            userList: []
          }
        })
        this.initSelectedRoleIds = roleIds
        this.defaultFormData.remark = data.remark
      }).finally(() => {
        this.loadingDetail = false
      })
    },
    changeTemplate (item) {
      this.activeTemplateId = item.value
    },
    // 保存配置信息
    save () {
      const vm = this
      const result = vm.checkOther()
      if (!result) {
        return
      }
      const data = {
        category: vm.formData.category,
        items: result,
        remark: vm.formData.remark
      }
      this.saving = true
      auditTplApi.editAuditTemplate(data).then(() => {
        this.$message.success(this.$t('successfullyOperation'))
      }).finally(() => {
        this.saving = false
      })
    },
    // 检测表单数据
    checkOther () {
      const items = this.$refs.auditProcessRef.getConfigsData()
      return items.length ? items : false
    },
    // 重置填写数据
    resetFormData () {
      this.$refs.auditProcessRef.resetConfigs()
      this.formData.remark = this.defaultFormData.remark
    }
  }

}
</script>
<style lang="less" scoped>
.left {
  border-right: 1px solid @borderColor;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 200px;
  position: relative;
  .auditTypeListBox {
    flex: 1 0 0;
    overflow: auto;
    .auditTypeListUl {
      padding-top: 12px;
      .auditTypeListItem {
        height: 48px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 24px;
        cursor: pointer;
        color: @color333;
        &:hover {
          background-color: @blockHoverBgColor;
          .roleName {
            color: @blockHoverTextColor;
          }
        }
        &.active {
          .roleName {
            color: @blockHoverTextColor;
          }
        }
      }
      .iconfont {
        margin-right: 10px;
      }
    }
  }
}
.right {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  .templateConfigForm {
    flex: 1 0 0;
    padding: 24px;
    overflow: auto;
  }
  .btnButtonBox {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid @borderColor;
    padding-left: 24px;
  }
}
</style>
<style lang="less">
.templateConfigForm {
  .customFormModelItem {
    .ant-form-item-label {
      margin-bottom: 20px;
    }
  }
}
</style>
